﻿$(window).load(function()
{//页面加载效果
	$(".loading").fadeOut();
});

$(document).ready(function()
{//字体大小随窗体变化缩放
	var width = $(window).width();
	$("html").css({fontSize: width/20});
	$(window).resize(function()
	{
		var width = $(window).width()
		$("html").css({fontSize: width/20});
	});
});
		
$(function () 
{//业务逻辑实现

//datetime();

//leftmiddle();
//leftbottom();

///righttop();
//rightmiddle();
//rightbottom();

function datetime()
{//显示读秒时间
    var t = setTimeout(time, 1000);
    function time()
    {
		clearTimeout(t);
		var dt = new Date();
		$("#datetime").html(dt.getFullYear()+"年"+(dt.getMonth()+1)+"月"+dt.getDate()+"日 "+
							dt.getHours()+"时"+dt.getMinutes()+"分"+dt.getSeconds()+"秒");
		t = setTimeout(time, 1000); 
    } 
}

function leftmiddle() 
{//实验任务数量统计（左中）
	option = 
	{
		tooltip: 
		{
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
    
		grid: 
		{
			left: '0%',
			top:'10px',
			right: '0%',
			bottom: '2%',
			containLabel: true
		},
		
		xAxis: 
		[{
			type: 'category',
			data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,.1)",
					width: 1,
					type: "solid"
				},
			},
		
			axisTick: {
				show: false,
			},
		
			axisLabel:  {
				interval: 0,
				show: true,
				splitNumber: 15,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '12',
				},
			},
		}],
		
		yAxis: 
		[{
			type: 'value',
			axisLabel: {
				show:true,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '12',
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,.1	)",
					width: 1,
					type: "solid"
				},
			},
			splitLine: {
				lineStyle: {
				   color: "rgba(255,255,255,.1)",
				}
			}
		}],
    
		series: [{
			type: 'bar',
			data: [200, 300, 300, 290, 150, 120, 260, 420, 362, 170, 140, 130],
			barWidth:'35%',
			itemStyle: {
				normal: {
					color:'#2f89cf',
					opacity: 1,
					barBorderRadius: 5,
				}
			}
		}
		]
	};
      
	//初始化图表、设置参数和设置缩放处理
	var chart = echarts.init(document.getElementById('leftmiddle'));
	chart.setOption(option);
	window.addEventListener("resize", function(){chart.resize();});
}

function leftbottom()
{//设备故障统计（左下）
	option = 
	{
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			type: 'scroll',
			orient: 'vertical',
			right: 0,
			textStyle : {
                color : '#ffffff',
            },
			data: ['在线设备', '故障设备', '停用设备']
		},
		series: 
		[{
			name: '设备故障统计',
			type: 'pie',
			radius: '70%',
			center: ['40%', '50%'],
			data: [
				{value: 140, name: '在线设备', itemStyle:{color:'#27d08a'}, label:{color: '#fff'}},
				{value: 20, name: '故障设备', itemStyle:{color:'#993333'}, label:{color: '#fff'}},
				{value: 30, name: '停用设备', itemStyle:{color:'#2f89cf'}, label:{color: '#fff'}},
			],
		}]
	};
	
	//初始化图表、设置参数和设置缩放处理
	var chart = echarts.init(document.getElementById('leftbottom'));
	chart.setOption(option);
	window.addEventListener("resize", function(){chart.resize();});
}

function righttop() 
{//设备使用时长统计（右上）
	option = 
	{
		tooltip: {
			trigger: 'axis',
			axisPointer: { type: 'shadow'}
		},
		
		grid: {
			left: '0%',
			top:'10px',
			right: '0%',
			bottom: '4%',
		   containLabel: true
		},
		
		xAxis: 
		[{
			type: 'category',
				data: ['拉曼', '拉曼', '拉曼', '拉曼', '拉曼', '拉曼', '拉曼'],
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
				},
			},
			
			axisTick: {
				show: false,
			},
			
			axisLabel:  {
				interval: 0,
				// rotate:50,
				show: true,
				splitNumber: 15,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '12',
				},
			},
		}],
		
		yAxis: 
		[{
			type: 'value',
			axisLabel: {
			   //formatter: '{value} %'
				show:true,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '12',
				},
			},
			
			axisTick: {
				show: false,
			},
			
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,.1	)",
					width: 1,
					type: "solid"
				},
			},
			
			splitLine: {
				lineStyle: {
				   color: "rgba(255,255,255,.1)",
				}
			}
		}],
		
		series: 
		[{
			type: 'bar',
			data: [500, 1230, 600, 200, 300, 300, 900],
			barWidth:'35%',
			itemStyle: {
				normal: {
					color:'#27d08a',
					opacity: 1,
					barBorderRadius: 5,
				}
			}
		}]
	};
      
	//初始化图表、设置参数和设置缩放处理
	var chart = echarts.init(document.getElementById('righttop'));
	chart.setOption(option);
	window.addEventListener("resize", function(){chart.resize();});
}

function rightmiddle() 
{//实验任务统计（右中）
    option = {
	    tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#dddc6b'
				}
			}
		},
		    
		legend: {
			top:'0%',
			data:['开发','测试'],
					textStyle: {
			   color: 'rgba(255,255,255,.5)',
				fontSize:'12',
			}
		},
		
		grid: {
			left: '10',
			top: '30',
			right: '10',
			bottom: '10',
			containLabel: true
		},

		xAxis: 
		[{
			type: 'category',
			boundaryGap: false,
			axisLabel:  {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize:12,
					},
			},
			
			axisLine: {
				lineStyle: { 
					color: 'rgba(255,255,255,.2)'
				}

			},

			data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

		}, 
		{
			axisPointer: {show: false},
			axisLine: {  show: false},
			position: 'bottom',
			offset: 20,
		}],

		yAxis: [{
			type: 'value',
			axisTick: {show: false},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,.1)'
				}
			},
		   axisLabel:  {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize:12,
					},
				},

			splitLine: {
				lineStyle: {
					 color: 'rgba(255,255,255,.1)'
				}
			}
		}],
		
		series: 
		[{
			name: '开发',
			type: 'line',
			 smooth: true,
			symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			lineStyle: {
				
				normal: {
					color: '#0184d5',
					width: 2
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(1, 132, 213, 0.4)'
					}, {
						offset: 0.8,
						color: 'rgba(1, 132, 213, 0.1)'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
				}
			},
				itemStyle: {
				normal: {
					color: '#0184d5',
					borderColor: 'rgba(221, 220, 107, .1)',
					borderWidth: 12
				}
			},
			data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

		}, 
		{
			name: '测试',
			type: 'line',
			smooth: true,
			symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			lineStyle: {
				
				normal: {
					color: '#00d887',
					width: 2
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(0, 216, 135, 0.4)'
					}, {
						offset: 0.8,
						color: 'rgba(0, 216, 135, 0.1)'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
				}
			},
				itemStyle: {
				normal: {
					color: '#00d887',
					borderColor: 'rgba(221, 220, 107, .1)',
					borderWidth: 12
				}
			},
			data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]
		}]
	};
      
	//初始化图表、设置参数和设置缩放处理
	var chart = echarts.init(document.getElementById('rightmiddle'));
	chart.setOption(option);
	window.addEventListener("resize", function(){chart.resize();});
}

function rightbottom()
{//实验设备使用率统计（右下）
	option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c} ({d}%)'
		},
		legend: {
			show:false,
			x : 'center',
			y : 'bottom',
			data: ['拉曼', '拉曼设备', '普拉', '瑞思', '拉瑞']
		},
		series: [
			{
				name: '设备使用率',
				type: 'pie',
				radius: [40, 60],
				center:['50%', '50%'],
				data: [
					{value: 335, name: '拉曼', label:{color: '#fff'}},
					{value: 310, name: '拉曼设备', label:{color: '#fff'}},
					{value: 234, name: '普拉', label:{color: '#fff'}},
					{value: 135, name: '瑞思', label:{color: '#fff'}},
					{value: 1548, name: '拉瑞', label:{color: '#fff'}}
				]
			}
		]
	};
	
	//初始化图表、设置参数和设置缩放处理
	var chart = echarts.init(document.getElementById('rightbottom'));
	chart.setOption(option);
	window.addEventListener("resize", function(){chart.resize();});
}
				
//END
});



		
		
		


		









